<template>
	<div class="cate">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator=">">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
				</el-col>
			</el-row>
			
			<!-- 表格区域 -->
			 <zk-table 
			 :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
				show-index index-text="#" border>
				<!-- 是否有效列模板 -->
				 <template slot="isok" slot-scope="scope">
					 <i class="el-icon-success" style="color: lightgreen;" v-if="scope.row.cat_deleted === false"></i>
					 <i class="el-icon-error" style="color: red;" v-else></i>
				 </template>
				 <!-- 排序列模板 -->
				 <template slot="order" slot-scope="scope">
					 <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
					 <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
					 <el-tag type="warning" size="mini" v-else>三级</el-tag>
				 </template>
				 <!-- 操作模板 -->
				 <template slot="opt" slot-scope="scope">
					 <el-button type="primary" icon="el-icon-edit" size="mini" @click="getCatechaId(scope.row.cat_id)">编辑</el-button>
					 <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row.cat_id)">删除</el-button>
				 </template>
			 </zk-table>
			 
			 <!-- 分页区域 -->
			 <el-pagination
			       @size-change="handleSizeChange"
			       @current-change="handleCurrentChange"
			       :current-page="querInfo.pagenum"
			       :page-sizes="[3, 5, 10, 15]"
			       :page-size="querInfo.pagesize"
			       layout="total, sizes, prev, pager, next, jumper"
			       :total="total">
			 </el-pagination>
		</el-card>
		<!-- 添加分类对话框 -->
		<el-dialog
		  title="添加分类"
		  :visible.sync="addCateDialogVisible"
		  width="50%"
			@close="addCateLosed"
		  >
			<!-- 主体区域 -->
		  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="分类名称:" prop="cat_name">
		      <el-input v-model="addCateForm.cat_name"></el-input>
		    </el-form-item>
				<el-form-item label="父级分类:">
				  <el-cascader
				      v-model="selectedKeys"
							expand-trigger="hover"
				      :options="parentCateList"
				      :props="cascaderProps"
				      @change="parentCateChanged"></el-cascader>
				</el-form-item>
			</el-form>
			
			<!-- 按钮区域 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addCateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCate">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 编辑对话框 -->
		<el-dialog
		  title="编辑"
		  :visible.sync="catejiVisible"
		  width="50%"
		  >
			<!-- 主体区域 -->
		  <el-form :model="ruleForm" :rules="addCateFormRules" ref="cateruleRef" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="分类名称" prop="cat_name">
		      <el-input v-model="ruleForm.cat_name"></el-input>
		    </el-form-item>
			</el-form>
			<!-- 按钮区域 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="catejiVisible = false">取 消</el-button>
		    <el-button type="primary" @click="cateButtonren">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//商品分类数据列表
				cateList:[],
				//数据获取判断
				querInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
				//总数据条数
				total:0,
				// 为table指定列的定义
				columns:[
					{
						label:'分类名称',
						prop:'cat_name'
					},
					{
						label:'是否有效',
						type:'template',
						template:'isok'
					},
					{
						label:'排序',
						type:'template',
						template:'order'
					},
					{
						label:'操作',
						type:'template',
						template:'opt'
					}
				],
				//添加分类对话框
				addCateDialogVisible:false,
				//添加分类的表单对象
				addCateForm:{
					//将要添加分类的名称
					cat_name:'',
					// 将要添加分类的id
					cat_pid:0,
					// 将要添加分类的等级
					cat_level:0
				},
				//添加分类的表单的验证对象
				addCateFormRules:{
					cat_name:[
						 { required: true, message: '请输入分类名称', trigger: 'blur' }
					]
				},
				//父级分类的列表
				parentCateList:[],
				//指定级联选择器的配置对象
				cascaderProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				//选中的父级id值
				selectedKeys:[],
				//编辑对话框的展开与隐藏
				catejiVisible:false,
				//根据id查找的分类
				ruleForm:{}
			}
		},
		created() {
			this.getCateList()
		},
		methods:{
			//获取所有商品分类数据
			async getCateList() {
				const {data:res} = await this.$http.get('categories',{params:this.querInfo} )
				if(res.meta.status !==200) {
					return this.$message.error('获取商品数据失败！')
				}else {
					this.cateList = res.data.result
					this.total = res.data.total
					
				}
			},
			//监听pagesize改变的事件
			handleSizeChange(newSize) {
				this.querInfo.pagesize = newSize
				this.getCateList()
			},
			//监听pagenum的改变
			handleCurrentChange(newPage) {
				this.querInfo.pagenum = newPage
				
				this.getCateList()
				
			},
			//点击添加按钮，显示对话框
			showAddCateDialog() {
				this.getParentCateList()
				this.addCateDialogVisible = true
			},
			//获取父级分类的数据列表
			async getParentCateList() {
				const {data:res} = await this.$http.get('categories',{ params:{type:2}})
				
				if(res.meta.status !== 200) {
					return this.$message.error('获取父级数据失败！')
				}else {
					this.parentCateList = res.data
				}
			},
			//选择项发生变化
			parentCateChanged() {
				if(this.selectedKeys.length > 0) {
					//父级分类的id
					this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1]
					//为当前分类等级赋值
					this.addCateForm.cat_level = this.selectedKeys.length
				}else {
					this.addCateForm.cat_pid = 0
					this.addCateForm.cat_level = 0
				}
			},
			//点击按钮，添加新的分类
			addCate() {
				this.$refs.addCateFormRef.validate(async valid => {
					if(!valid) return
					const {data:res} = await this.$http.post('categories',this.addCateForm)
					if(res.meta.status !== 201) {
						return this.$message.error('添加分类失败！')
						
					}else {
						this.$message.success('添加分类成功')
						this.getCateList()
						this.addCateDialogVisible = false
					}
				})
			},
			//监听添加对话框的关闭事件
			addCateLosed() {
				this.$refs.addCateFormRef.resetFields()
				this.selectedKeys = []
				this.addCateForm.cat_level = 0
				this.addCateForm.cat_pid = 0
			},
			async getCatechaId(id) {
				const {data:res} = await this.$http.get('categories/' + id)
				if(res.meta.status !== 200) {
					return this.$message.error('查找分类失败！')
				}else {
					this.ruleForm = res.data
					this.catejiVisible = true
				}
			},
			// 编辑按钮确认事件
			cateButtonren() {
				this.$refs.cateruleRef.validate(async valid => {
					if(!valid) return
					const {data:res} = await this.$http.put('categories/' + this.ruleForm.cat_id,{ cat_name:this.ruleForm.cat_name })
					
					if(res.meta.status !== 200) {
						return this.$message.error('修改分类失败！')
						
					}else {
						this.$message.success('修改分类成功')
						this.getCateList()
						this.catejiVisible = false
					}
				})
			},
			//删除按钮点击事件
			async deleteCate(id) {
				const {data:res} =await this.$http.delete('categories/' + id)
				if(res.meta.status !== 200) {
					return this.$message.error('删除失败')
				}else {
					this.$message.success('已删除')
					this.getCateList()
				}
			}
		}
	}
</script>

<style scoped>
	.el-card {
		margin-top: 15px;
	}
	.el-row {
		margin-bottom: 15px;
	}
	.el-cascader {
		width: 100%;
	}
</style>
